import './index.scss';
import React, { Component } from 'react';
import services from 'services';
import qs from 'qs';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import wxjssdk from 'libs/wxjssdk';
import moment from 'moment';
import AppWakeup from 'components/AppWake';
import Modal from "components/Modal";
import Comments from 'components/Comments';

const VIDEO = 2;

class Page extends Component {
	state = {
		downloadAppModalVisible: false,
		article: null
	}

	componentDidMount() {
		services.App.getMensesArticle({ cid: this.props.match.params.id }).then(res => {
			let { data, code } = res.data;

			if (code == 0) {
				this.setState(
					{ article: data },
					() => {
						if (data.type == VIDEO) {
							this.player = videojs(document.querySelector('.video-js'), this.props, function onPlayerReady() {
							});
						}
					}
				);

				window.setDetailShare = function () {
					wxjssdk.initShare(
						location.href.split('?')[0],
						data.title,
						data.intro,
						data.img
					);
				};

				window.setDetailShare();
				this.shareTimer = setInterval(window.setDetailShare, 800);
			}
			else {
				this.setState({
					notFound: code != 0
				});
			}
		});
	}

	componentWillUnmount() {
		this.shareTimer && clearInterval(this.shareTimer);
		this.player && this.player.dispose();
	}

	toggleDownloadAppModal = visible => {
    this.setState({
      downloadAppModalVisible: visible
    });
	}
	
	dataRestructure = (data) => {
		let newData = [...data];
		newData = data.map(item => {
			return {
				root: {
					headimageurl: item.avatar,
					nickname: item.nickname,
					addtime: item.addtime,
					content: item.content,
				}
			}
		});
		return newData;
	}

	render() {
		let { article, notFound, downloadAppModalVisible } = this.state;
		let appWakeUpProps = {
			action: 'open_homepage',
			top: true
		};
		
		return (
			<div className="page-menses-article">
				{
					article &&
					<React.Fragment>
						<div className="article-hd">
							{
								article.type !== VIDEO && (
									<div className="article-intro-image">
										<img src={article.img} />
									</div>
								)
							}
						</div>

						<div className="article-bd">
							{
								article.type === VIDEO &&
								<div className="article-video-s">
									<video id='my-video' className='video-js' controls preload='auto' data-setup='{}'>
										<source src={article.video} type='video/mp4' />
									</video>
								</div>
							}

							<h1 className="article-title">{article.title}</h1>
							<div className="article-meta">
								<p>{moment(parseInt(article.updatetime)).format("YYYY-MM-DD")}</p>
								<p className="count">{article.readcount}</p>
							</div>

							{
								article.type === VIDEO ? 
								<div className="article-content">{article.intro}</div> :
								<div className="article-content" dangerouslySetInnerHTML={{ __html: article.content }}></div>
							}
						</div>

						<div className="article-ft">
							<Comments 
								onCommentContainerClick={this.toggleDownloadAppModal.bind(this, true)} 
								api={services.App.getMensesArticleComments({ cid: this.props.match.params.id, page: 1, pagesize: 9999 })} 
								dataRestructure={this.dataRestructure}
								thumbCount={article.thumbcount >> 0}
							/> 
						</div>

						<Modal
              title="继续操作需要下APP"
              visible={downloadAppModalVisible}
              footer={
                <React.Fragment>
                  <div className="modal-btn" onClick={this.toggleDownloadAppModal.bind(this, false)}>取消</div>
                  <div className="modal-btn" onClick={() => this.appWakeUpInstance.openApp()}>下载App</div>
                </React.Fragment>
              }
            ></Modal>

						<AppWakeup  {...appWakeUpProps} getInstance={instance => (this.appWakeUpInstance = instance)} />
					</React.Fragment>
				}
				{
					notFound && '哦..sorry..文章飘去其他星球了...'
				}
			</div>
		);
	}
}

export default Page;